<template>
    <div class="failReason">
        <div class="row items-center"><span class="frTitle">新增不合格原因</span> <span class="reqFieldMsg">(必须填写)</span></div>

        <div v-for="fr in selectedFR" :key="fr.id" class="row items-center justify-center frItem">
            <div class="col frChoice text-center" :class="{'addFrChoice': fr.isChosen}">{{ fr.reason }}</div>
            <div class="col-auto addRemoveBtn" @click="toggleFailReason(fr.id)">
                <q-icon v-if="!fr.isChosen" name="fa-solid fa-plus"  class="addRemoveSVG" />
                <q-icon v-if="fr.isChosen" name="fa-solid fa-minus"  class="addRemoveSVG" />
            </div>
        </div>
    </div>

</template>

<script setup>

</script>

<style lang="scss" scoped>
 .failReason{
            background-color: rgba(255, 255, 255, 0.685);
            padding: 10px 10px 10px 10px;
            border-radius: 5px;
            @media (max-width:650px){
                font-size: 0.7rem !important;
            }
            .frTitle{
                color: #5F51C0;
                font-weight: bold;
            }
            .reqFieldMsg{
                color: #E02F23;
                margin-left: 5px;
                font-size: 0.8rem;
            }
            .frItem{
                width: 100%;
                margin-top: 5px;
                .frChoice{
                    background-color: white;
                    padding-top: 3px;
                    padding-bottom: 3px;
                }
                .addFrChoice{
                    background-color: #CAD9FF !important;
                }
                .addRemoveBtn{
                    background-color: #5F51C0;
                    padding: 3px 5px 3px 5px;
                    text-align: center;
                    height: 100%;
                    .addRemoveSVG{
                        color: white;
                    }
                }
            }
        }
</style>
